{layout name="layout2" /}
<script src="/static/common/js/cities.js?v=12345"></script>
<script src="/static/common/js/zhCn.js?v=12345"></script>
<div id="vue-app" class="layui-form" lay-filter="layuiadmin-form-unit" id="layuiadmin-form-unit" style="padding: 20px 30px 0 0;">
    <input type="hidden" value="{$info.id}" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label" style="white-space: nowrap;"><font color="red">*</font>供货商名称：</label>
        <div class="layui-input-inline" style="width: 400px">
            <input type="text" name="name" value="{$info.name}" lay-verify="required" lay-vertype="tips" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="white-space: nowrap;"><font color="red">*</font>联系人姓名：</label>
        <div class="layui-input-inline" style="width: 400px">
            <input type="text" name="contact" value="{$info.contact}" lay-verify="required" lay-vertype="tips" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="white-space: nowrap;"><font color="red">*</font>联系电话：</label>
        <div class="layui-input-inline" style="width: 400px">
            <input type="text" name="tel" value="{$info.tel}" lay-verify="required" lay-vertype="tips" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动区域：</label>
        <el-form-item  >
          <el-cascader
            
            v-model="city_code"
            hover
            placeholder="请选择活动区域"
            :options="cities"
            :props="props"
            @change="onCitisSelectChange"
          />
        </el-form-item>
        <!-- 隐藏域用于同步Element Plus组件的值到Layui表单 -->  
        <input type="hidden" name="city_code" v-model="city_code">
        <input type="hidden" name="city_name" v-model="city_name">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="white-space: nowrap;"><font color="red">*</font>详细地址：</label>
        <div class="layui-input-inline" style="width: 400px">
            <input type="text" name="address" value="{$info.address}" lay-verify="required" lay-vertype="tips" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="white-space: nowrap;">备注：</label>
        <div class="layui-input-inline" >
            <textarea name="remark" placeholder="" class="layui-textarea" style="width: 400px;height: 100px">{$info.remark}</textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="supplier-submit-edit" id="supplier-submit-edit" value="确认">
    </div>
</div>
<script>
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
    })
</script>
<script type="text/javascript">
    const { createApp } = Vue;
    let hasData = false
    var pageData = {$info_json|raw|default='hasData'};
    console.log('pageData------',pageData)
    createApp({
        data() {
          return {
            addForm:{
                contact:"",
                name:"",
                id:"",
                remark:"",
                tel:"",
                address:"",
                city_code:"",
                city_name:""
            },
            
            addressOptions:[
                {
                    "id":1,
                    "value":"芳佳茗品（北京西城）"
                },
                {
                    "id":2,
                    "value":"天择优选（天津市西青区）"
                }
            ],
            cities:cities,
            city_code:[],
            city_name:'',
            props: {
              expandTrigger: 'hover',
              value: 'code',
              label: 'name',
              children: 'children'
            }
          }
        },
        methods:{
            onCitisSelectChange(e){
                //console.log(e)
                let v = ''
                this.cities.forEach(x=>{
                    if(x.code == e[0]){
                        v+=x.name
                        x.children.forEach(y=>{
                            if(y.code == e[1]){
                                v+=y.name
                                y.children.forEach(z=>{
                                    if(z.code == e[2]){
                                        v+=z.name
                                        this.city_name = v
                                    }
                                })
                            }
                        
                    })
                    }
                    
                })
            },
          initialForm(){
              if(!pageData){
                  return
              }
            //   this.addForm.name = pageData.base.name
            //   this.addForm.tel = pageData.tel
            //   this.addForm.contact = pageData.contact
            //   this.addForm.address = pageData.address
              this.city_code = pageData.city_code && pageData.city_code.split(',')
              console.log(this.city_code,'city_code')
              this.city_name = pageData.city_name
            //   this.addForm.deadline_time = pageData.base.deadline_time
              
            //   this.spec_id = pageData.spec.map(x=>x.id)
            //   this.spec_name = pageData.spec.map(x=>x.name)
            //   this.specList = pageData.item.map(x=>{
            //       return {
            //           bindKey:Math.random(),
            //           ...x
            //       }
            //   })
              
          }
        },
        created(){
            this.initialForm()
            // window.vueData = this
            // this.addForm.name = '测试活动请勿购买！！！'
            // console.log(666)
        }
    }).use(ElementPlus,{size:'large',zIndex:1000,locale: zhCn}).mount('#vue-app')
    
</script>